<!--
 * @Author: ZRX
 * @Date: 2024-01-16 14:14:16
 * @LastEditors: sueRimn
 * @LastEditTime: 2024-02-22 14:55:55
 * @Descripttion: 
 * @version: 
-->
<template>
  <h4 class="title_lv2">关于form表单的使用</h4>
  <div class="statement">
    <ol>
      
      <li>
        使用element plus的form表单组件，需要添加class的组件
          <div class="desc_div">
            <table >
              <tr class="label_td">
                <td style="min-width: 150px;">element plus</td>
                <td>添加className</td>
                <td>描述</td>
              </tr>
              <tr>
                <td>el-input</td>
                <td>qf_input</td>
                <td>
              <pre><code class="language-js">{{htmInput}}</code></pre> 
                </td>
              </tr>
              <tr>
                <td>el-select</td>
                <td>qf_select</td>
                <td>
                  <pre><code class="language-js">{{' <el-select class="qf_select"    />'}} </code></pre> 
                </td>
              </tr>
              <tr>
                <td>el-date-picker</td>
                <td>qf_date</td>
                <td>
                  <pre><code class="language-js">{{'  <el-date-picker class="qf_date"    type="date"   />'}} </code></pre> 
                </td>
              </tr>
              <tr>
                <td>el-input type="textare"</td>
                <td>qf_textare</td>
                <td>
                  <pre><code class="language-js">{{'  <el-input class="qf_textare"    type="textare"   />'}} </code></pre> 
                </td>
              </tr>
              <tr>
                <td>el-cascader</td>
                <td>qf_cascader</td>
                <td>
                  <pre><code class="language-js">{{'  <el-cascader class="qf_cascader"      />'}} </code></pre> 
                </td>
              </tr>
              <tr>
                <td>form表单纯标签展示</td>
                <td></td>
                <td>
                  <pre><code class="language-js">{{' <el-form-item label="姓名"><span class="label_show">33333</span> </el-form-item>'}} </code></pre> 
                </td>
              </tr>
            </table>


            
          </div>
      </li>
      <!-- <li> -->
        <!-- 需要和php对接初始化form表单接口<br />对接 interface路径<span class="tip_important"
          >import { formInter } from "@/api/interface/form.ts";</span
        > -->
      <!-- </li> -->
    </ol>
    <!-- 页面代码 源码 -->
    <!-- <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm }} </code></pre>
    </dropWrap> -->
    <!-- 页面代码 源码 -->
  </div>
  <h4 class="title_lv2"></h4>
  <div class="statement">
    <!-- 页面代码 源码 -->
    <ul>
      <li>
        <!-- json数据格式<br /> -->
        <!-- mock JSON数据 <span class="tip_important">src\views\projectDemo\demo\component\form\form.json</span> -->
      </li>
    </ul>
    <div></div>
    <!-- <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm2 }} </code></pre>
    </dropWrap> -->
    <!-- 页面代码 源码 -->
  </div>
  <div class="hr das"></div>
  <h4 class="title_lv2">form表单tooltips</h4>
  <div class="statement">
    <ol>
      <li>
        <el-form ref="demoFormRef" :model="form" :rules="rules" label-position="top">
          <el-form-item>
            <template #label>
              替换label<el-tooltip content="Top center" placement="top">
                <el-icon color="#409EFC" class="el-input__icon"><InfoFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input v-model="input" placeholder="请输入" />
            <div class="form_tooltip">
              <el-popover placement="bottom" :width="350" trigger="hover">
                <template #reference>
                  <div class="tooltip_info">
                    <el-icon color="#409EFC" class="el-input__icon"><InfoFilled /></el-icon
                    >input前后选择使用select，不建议直接使用disabled，若使用需要给select也加上disabled
                    不建议直接使用，可以使用input禁用
                  </div>
                </template>
                <div>
                  input前后选择使用select，不建议直接使用disabled，若使用需要给select也加上disabled
                  不建议直接使用，可以使用input禁用<br />
                  <span class="tip_important">此方法不建议禁用，可如上使用,直接展示文字</span>
                </div>
              </el-popover>
            </div>
          </el-form-item>
        </el-form>
      </li>
    </ol>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
      <pre><code class="language-js">{{ htm3 }} </code></pre>
    </dropWrap>
    <!-- 页面代码 源码 -->
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import dropWrap from "../../dropWrap.vue";
let input = ref("");

let htmInput = ref<string>(`
  <el-input class="qf_input" />
  input只允许输入数字    
    v-number 限制整数，v-number:2 限制两位小数，v-number:2=3 限制两位小数，整数位三位，
    v-number=2 限制两位整数
        `);


let htm = ref<string>(`
    import {formInter} from "@/api/interface/form.ts";
    const formObj =reactive<formInter.form<formInter.baseInfo>>({});
      `);
let htm2 = ref<string>(`
    "name"为form表单input中v-modal的key值
    {
    "name": {
      "label": "名称", //翻译label
      "required": true, //true 为必填 false 为非必填
      "type": "input", //文本类型  input /select/selectMulit /checkbox /radio /datatime
      "isShow": true, //是否显示 默认显示  false 不显示
      "readonly": false, //是否禁用
      "keyVal": "", //默认值
      "initData": "" //初始化值
    }
  }
    `);

let htm3 = ref<string>(`
  1)
   form表单替换label，使用具名函数"#label",标题提示可使用element plus的"el-tooltip"
   <template #label>
            替换label<el-tooltip content="Top center" placement="top">
              <el-icon color="#409EFC" class="el-input__icon"><InfoFilled /></el-icon>
            </el-tooltip>
          </template>

  2)
  底部添加提示使用"class='form_tooltip'",内容实用element plus的"el-popover"
  <div class="form_tooltip">
              <el-popover placement="bottom" :width="350" trigger="hover">
                <template #reference>
                  <div class="tooltip_info">
                    <el-icon color="#409EFC" class="el-input__icon"><InfoFilled /></el-icon
                    >input前后选择使用select，不建议直接使用disabled，若使用需要给select也加上disabled
                    不建议直接使用，可以使用input禁用
                  </div>
                </template>
                <div>
                  input前后选择使用select，不建议直接使用disabled，若使用需要给select也加上disabled
                  不建议直接使用，可以使用input禁用<br />
                  <span class="tip_important">此方法不建议禁用，可如上使用,直接展示文字</span>
                </div>
              </el-popover>
            </div>
      `);

/*  生命周期*/
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
<style lang="scss">
.tip_important {
  padding: 0 5px;
  color: red;
}
.desc_div{
  width: 100%;
  padding: 20px;
  table{
    width: 100%;
    border-collapse:collapse;
    td{
      border: 1px solid #cdcdcd;
      padding: 3px 5px;
      word-break: keep-all;
    }
    .label_td{
      background-color: #f5f7fa;
    }
  }
}
</style>
